<template>
	<view class="page" v-cloak v-if="isPageShow">
		<!-- 自定义头部 -->
		<view class="cu-custom">
			<view class="cu-bar fixed"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px', backgroundColor: 'rgba(255,255,255,' + opacity + ')', boxShadow: '0 0 10rpx rgba(200,200,200,' + opacity + ')' }]">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content tabs flex"
					:style="[{ top: StatusBar + 'px',height: CustomBar - StatusBar  + 'px',lineHeight: CustomBar - StatusBar  + 'px' }]"
					v-if="scrollTop > CustomBar">
					<block v-for="item in tabs" :key="item.title">
						<view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
							<view class="tab-item line-height-78 height-78 fu-fs28"
								:class="{ 'active text-333 fu-fs32': curTab == item.id }">{{ item.title }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view id="banners" class="relative height-750">
			<swiper class="w100 height-750" :indicator-dots="false" :circular="true" @change="changeSwiper">
				<block v-for="(item, index) in swipers" :key="index">
					<swiper-item @click="preview(item, swipers)">
						<fu-image :src="item" mode="aspectFill"></fu-image>
					</swiper-item>
				</block>
			</swiper>
			<view class="pagination-left text-sm padding-lr-sm line-height-48 width-290 height-48 radius-48" v-if="horsRaceList.length>0">
				<swiper class="height-40" autoplay :vertical='true' :disable-touch='true' :circular='true'>
					<block v-for="(item, index) in horsRaceList" :key="index">
						<swiper-item>
							<view class="flex align-center">
								<image :src="item.head_img?item.head_img:'/static/logo.png'" mode="" style="width: 40rpx;height: 40rpx;border-radius: 40rpx;margin-right: 8rpx;"></image>
								<view class=" text-cut">
									{{item.user_nickname|nameFilter}}购买了此商品
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="pagination text-sm text-center line-height-40 width-80 height-40 radius-40">
				{{ curSwiper }}/{{ swipers.length }}
			</view>
		</view>
		<!-- 悬浮Tab栏 -->
		<!-- <view class="tabs flex" v-if="scrollTop > CustomBar" :style="{ opacity: opacity,top: CustomBar+'px' }">
			<block v-for="item in tabs" :key="item.title">
				<view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
					<view class="tab-item height-88 line-height-88 text-999" :class="{ active: curTab == item.id }">{{
            item.title
          }}</view>
				</view>
			</block>
		</view> -->
		<!-- 价格展示区 -->
		<view class="prices height-112 w100 relative">
			<view class="padding-lr-24 flex justify-between align-center relative">
				<view class="flex-sub w60 height-112 text-white flex algin-center  line-height-112">
					<view>
						<text class="text-price text-xl"></text>
						<text class="text-xxl">{{ goodsInfo | filterGoodsPrice }}</text>
					</view>
					<view>
						<text class="text-df text-white  text-price margin-left-sm text-through">{{ goodsInfo.market_price }}</text>
					</view>
				</view>
				<view class="height-112 flex flex-direction align-center justify-center" v-if="downInfo">
					<view class="text-xs">{{downInfo.title}}</view>
					<uni-countdown color="#FFFFFF" background-color="#2A3948" :day="downInfo.days"
						:hour="downInfo.hours" :minute="downInfo.minutes" :second="downInfo.seconds"
						@timeup="countOver"></uni-countdown>
				</view>
			</view>
		</view>
		<!-- 商品信息展示区 -->
		<view class="padding bg-white">
			<view class="flex justify-between align-center">
				<view class="text-lg text-333 word-break-all text-bold">{{ goodsInfo.name }}</view>
				<view class="margin-left width-80 flex flex-direction align-center justify-center"
					style="min-width: 80rpx" @tap="collect">
					<image v-if="goodsInfo.is_collect" class=" fu-block-32" :src="imgBaseUrl + 'goods/collect-2.png'"/>
					<image v-else class="fu-block-32" :src="imgBaseUrl + 'goods/collect-1.png'"/>
					<text class="text-sm text-333"
						:class="'fu-cred' && goodsInfo.is_collect ">{{ goodsInfo.is_collect ? i18n['已收藏'] : i18n['收藏'] }}</text>
				</view>
			</view>
			<view class="margin-top-sm">
				<text v-for="(item, index) in goodsInfo.goods_label_service" :key="index" class="cu-tag sm radius line-orange goods-tag">
					{{item}}
				</text>
			</view>
			<!-- <view v-if="goodsInfo.description" class="margin-top-sm text-sm text-999 text-cut-3 word-break-all">{{ goodsInfo.description }}</view> -->
			<!-- <view class="margin-top-sm text-sm text-999">
				<text>{{i18n['库存']}}：{{ goodsInfo.totalStock }}</text>
				<text class="padding-lr-sm">|</text>
				<text class="">{{i18n['销量']}}：{{ goodsInfo.sales_sum }}</text>
			</view> -->
			<!-- <view class="adslogan text-theme margin-top-sm">
				{{goodsInfo.adslogan}}
			</view> -->
		</view>
		<!-- 规格,地址,服务,参数 -->
		<view class="margin-top-10 bg-white padding-lr">
			<view class="flex align-center" @tap="openPopup('specs','buy')" v-if="goodsInfo.is_spec">
				<view class="text-df text-bold text-333 width-100 ">{{i18n['规格']}}</view>
				<view class="flex flex-sub justify-end padding-tb solid-bottom">
					<view class="text-df text-333 text-cut">
						<text v-if="sku_name">{{ sku_name }}，</text>
						{{ goodsInfo.number }}{{i18n['件']}}
					</view>
					<view class="icon">
						<text class="cuIcon-right text-sm text-999 margin-left-xs"></text>
					</view>
				</view>
			</view>

			<!-- 地址 -->
		<!-- 	<view class="flex align-center" @tap="switchAddress" v-if="curAddr">
				<view class="text-df text-bold text-333 width-100">{{i18n['送至']}}</view>
				<view class="flex flex-sub justify-end padding-tb solid-bottom" style="min-width: 1px;">
					<view class="text-df text-333 text-cut align-center flex" style="min-width: 1px;">
						<image class="fu-block-32" :src="imgBaseUrl + 'goods/address-copn1.png'"/>
						<view class="text-cut flex-sub" style="min-width: 1px;">
							{{ curAddr.province }}{{ curAddr.city }}{{ curAddr.district }}{{ curAddr.address }}</view>
					</view>
					<view class="icon">
						<text class="cuIcon-right text-sm text-999"></text>
					</view>
				</view>
			</view> -->
			<view class="flex align-center" @tap="switchFreight">
				<view class="text-df text-bold text-333 width-100">{{i18n['运费']}}</view>
				<view class="flex flex-sub justify-between padding-tb  ">
					<view class="flex-sub text-sm text-333 text-cut text-right">{{i18n['运费说明']}}</view>
					<view class="icon"><text class="cuIcon-right text-sm text-999  margin-left-xs"></text></view>
				</view>
			</view>
		</view>
		<!-- 评价展示区 -->
		<view id="evaluates" class="margin-top-10 bg-white">
			<view class="flex justify-between align-center padding-lr-sm padding-tb">
				<view class="title-block flex align-center fu-fs32 text-333 text-bold">
					{{i18n['商品评价']}}（{{ comment_total }}）
				</view>
				<view class="fu-fs24 flex align-center" @tap="navToComment">
					<view class="text-333" v-if="goodsInfo.praise_rate || goodsInfo.praise_rate == 0">
						{{ i18n['好评率']}}{{ goodsInfo.praise_rate + '%' }}
					</view>
					<text class="text-333" v-else>{{i18n['查看全部']}}</text>
					<text class="cuIcon-right text-999 margin-left-xs"></text>
				</view>
			</view>
			<view class="padding-lr" v-if="comment.length > 0">
				<block v-for="(item, index) in comment" :key="index">
					<fu-evaluate :prop="item"></fu-evaluate>
				</block>
			</view>
		</view>
		<!-- 问答展示区 -->
		<view class="margin-top-10 bg-white padding-tb">
			<view class="flex justify-between align-center padding-lr-sm">
				<view class="title-block flex align-center fu-fs32 text-333 text-bold">
					{{i18n['问答']}}（{{ question_total }}）
				</view>
				<view class="fu-fs24" @tap="navToQuestionsAnswers">
					<text class="text-333">{{i18n['查看全部']}}</text>
					<text class="cuIcon-right text-999 margin-left-xs"></text>
				</view>
			</view>
			<view class="padding-lr-sm">
				<block v-for="(item, index) in question_list" :key="index">
					<fu-details-question-answers :item="item"></fu-details-question-answers>
				</block>
			</view>
		</view>
		<!-- 问答 end -->
		<!-- 商家信息 start -->
		<view class="evaluates margin-top-xs  bg-white padding-lr" v-if="shop_info.id">
		  <view class="merchant-info flex justify-between" @click="goMerchant(shop_info)">
		    <view class="left flex">
		      <view class="merchant-img">
		        <fu-image :src="shop_info.store_logo" mode="aspectFill" />
		      </view>
		      <view class="merchant-text ">
		        <view class="m-title text-cut ">{{ shop_info.store_name }}</view>
		        <view class="m-text flex align-center">
		          <fu-star :readonly="false" :value="shop_info.store_star" :size="30" color="#FC9C3A" voidColor="#DBDBDB">
		          </fu-star>
		          <text class="margin-left-xs text-999">{{ shop_info.store_collection_num }}{{ i18n['人关注'] }}</text>
		        </view>
		      </view>
		    </view>
		    <view class="right">
		      <text class="text-sm text-666">进店逛逛 <text class="cuIcon-right"></text></text>
		    </view>
		  </view>
		</view>
		<!-- 商家信息 end -->
		<!-- 商品详情 -->
		<view id="details" class="margin-top-10 bg-white padding-tb">
			<view class="padding-lr-sm">
		 	<view class="title-block flex align-center fu-fs32 text-333 text-bold">{{i18n['商品详情']}}</view>
			</view>
			<view class="word-break-all margin-top">
				<jyf-parser :html="body"></jyf-parser>
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="tools bg-white">
			<view class="toolbar flex height-100">
				<view class="flex-sub padding-left flex justify-between align-center">
					<!-- <view class="flex flex-direction text-sm text-666 align-center relative" @tap="navToServer">
						<image class="fu-block-44" :src="imgBaseUrl + 'activity/007.png'" mode="aspectFit"></image>
						<text class="margin-top-xs">{{i18n['客服']}}</text>
					</view> -->
					<view class="flex flex-direction text-sm text-666 align-center relative" @tap="goMerchant(shop_info)">
					  <image class="fu-block-44" :src="imgBaseUrl+'goods/005.png'" mode="aspectFit"></image>
					  <text class="margin-top-xs">店铺</text>
					</view>
					<button class="flex flex-direction text-sm text-666 align-center relative" open-type="contact">
						<image class="fu-block-44" :src="imgBaseUrl+'goods/007.png'" mode="aspectFit"></image>
						<text class="margin-top-xs">{{i18n['客服']}}</text>
					</button>
					<view class="flex flex-direction text-sm text-666 align-center relative" @tap="navToCart">
						<image class="fu-block-44" :src="imgBaseUrl + 'activity/008.png'" mode="aspectFit"></image>
						<text class="margin-top-xs">{{i18n['购物车']}}</text>
						<text v-if="parseInt(cartNumber) > 0" class="tag">{{ cartNumber }}</text>
					</view>
					<!-- <view class="flex flex-direction text-sm text-666 align-center relative" @tap="openPopup('share')">
						<image class="fu-block-44" :src="imgBaseUrl + 'activity/006.png'" mode="aspectFit"></image>
						<text class="margin-top-xs">{{i18n['分享']}}</text>
					</view> -->
					<!-- <button class="flex flex-direction text-sm text-666 align-center relative" open-type="share">
					  <image class="fu-block-44" :src="imgBaseUrl+'goods/006.png'" mode="aspectFit"></image>
					  <text class="margin-top-xs">{{i18n['分享']}}</text>
					</button> -->
				</view>
				<view class="flex align-center margin-left-xl padding-right-sm margin-left-100">

					<view class="width-364 height-80 bg-theme text-center line-height-80 text-white round"
						@tap="openPopup('specs', 'buy')">
						<text class="text-df">{{i18n['立即抢购']}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 运费说明弹窗 -->
		<fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain>
		<!-- 地址弹窗 -->
		<fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
		<!-- 分享弹窗 -->
		<fu-share ref="share" :info="shareInfo" @getPosterInfo="getShareCode"></fu-share>
		<!-- 规格弹窗 -->
		<fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo"
			:limit="limit" @changeNumber="setNumber" @changeSpec="setSpec" @addCart="addCart" @buyNow="buyNow">
		</fu-specs-popup>
		<fu-notwork></fu-notwork>
	</view>
</template>
<script>
	import richText from "@/common/utils/richText.js";
	import {
		SHAREURL
	} from '@/common/config.js';
	import fuEvaluate from "../../components/fu-evaluate/fu-evaluate.vue";
	import fuDetailsQuestionAnswers from '@/pages/goods/components/fu-question-answers/fu-details-question-answers.vue';
	import fuExplain from '../../components/fu-explain/fu-explain.vue';
	import fuGoodsAddress from "../../components/fu-goods-address/fu-goods-address.vue";
	import fuSpecsPopup from "../../components/fu-specs-popup/fu-specs-popup.vue";
	export default {
		components: {
			fuEvaluate,
			fuDetailsQuestionAnswers,
			fuExplain,
			fuGoodsAddress,
			fuSpecsPopup
		},
		data() {
			return {
				curSwiper: 1, // 当前轮播图index
				tabs: [{
						title: global.i18n["商品"],
						id: "banners",
					},
					{
						title: global.i18n["评价"],
						id: "evaluates",
					},
					{
						title: global.i18n["详情"],
						id: "details",
					}
				],
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				curTab: "banners",
				scrollTop: 0,
				opacity: 0,
				swipers: [], // 轮播图
				goodsInfo: {}, // 商品信息
				spec_list: [], // 规格列表
				sku_list: [], // 规格参照列表
				sku_id: 0, // 当前规格id
				sku_name: "", //  当前规格名称
				goods_id: 0, // 商品id
				activity_id: 0,
				body: "", // 商品介绍
				comment: [], // 评论列表
				comment_total: 0, // //评论条数
				activityInfo: null, // 活动信息
				question_list: [], // 问答列表
				question_total: 0, // 问答条数
				limit: 0, // 限购数量
				order_paid: 0,
				addrs: [],
				curAddr: null,
				downInfo: null,
				shareCode: '',
				freight_explain: '', //{String} 运费说明
				explain_title: '', //{String}运费说明标题
				horsRaceList: [],
				isPageShow: false,
				activity_id: 0,
				invite_code: '',
				send_type: 0,
				shop_info:{},
				shop_id:'',
			};
		},
		computed: {
			//是否是会员
			isMember() {
				return this.$store.getters.isMember;
			},
			shareInfo() {
				return {
					goods_id: this.goods_id,
					sku_id: this.sku_id,
					goodsName: this.goodsInfo.name,
					goodsImage: this.swipers[0],
					thumb: this.goodsInfo.thumb,
					summary: this.goodsInfo.description,
					price: this.goodsInfo.activity_price,
					market_price: this.goodsInfo.market_price,
					avatar: this.userInfo && this.userInfo.head_img || '',
					name: this.userInfo && this.userInfo.user_name || '',
					href: SHAREURL +
						`pages/seckill-detail/index?goods_id=${this.goods_id}&sku_id=${this.sku_id || 0}&phone=${ this.userInfo &&this.userInfo._mobile || 0}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}&activity_id=${this.activity_id || 0}&type=skill`, // H5地址
					code: this.shareCode, // 二维码
				};
			},
			cartNumber() {
				return this.$store.getters.allNum;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			}
		},
		onLoad(options) {
			let {
				goods_id,
				activity_id = 0,
				sku_id = 0,
				scene,
				type,
				invite_code
			} = options;
			if (scene) {
				const params = decodeURIComponent(options.scene);
				params.split("&").forEach((item, index) => {
					switch (index) {
						case 0:
							goods_id = item.split("=")[1];
							break;
						case 1:
							activity_id = item.split("=")[1];
							break;
						case 2:
							sku_id = item.split("=")[1];
							break;
						case 3:
							invite_code = item.split("=")[1];
							break;
					}
				});
				type = "share";
			}
			this.goods_id = goods_id;
			this.sku_id = sku_id;
			this.activity_id = activity_id;
			this.invite_code = invite_code;
			if(invite_code){
				uni.setStorageSync('COMMONINVITECODESYNC', invite_code);
			}
			if (type) {
				this.openModel = "share";
			}
			this.loadData();
			this.loadHorsRaceLamp();
		  uni.$on('refreshAddress', data => {
			this.loadAddress();
		  });
		},
		onUnload() {
		  this.clearPolling();
		  uni.$off('refreshAddress');
		},
		onShow() {
			console.log(this.userInfo, this.invite_code, '0000000000000000000000000')
			if (global.token) {
				this.loadAddress();
				this.getInfo();
			}
		},
		onPageScroll(e) {
			let top = Math.round(e.scrollTop);
			let tab1 = Math.round(this.tabs[1].top);
			let tab2 = Math.round(this.tabs[2].top);
			let CustomBar = Math.round(this.CustomBar);
			let navH = 115 + this.StatusBar;
			this.scrollTop = top;
			this.opacity = (top / CustomBar).toFixed(2);
			if (top >= 0 && top < tab1 - navH) {
				this.curTab = 'banners';
			} else if (top >= tab1 - navH && top < tab2 - navH) {
				this.curTab = 'evaluates';
			} else if (top >= tab2 - navH) {
				this.curTab = 'details';
			}
		},
		onShareAppMessage() {
			return {
				title: this.goodsInfo.name,
				path: `/pages/activity/seckill/seckill-detail/index?goods_id=${this.goods_id}&activity_id=${this.activity_id || 0}&sku_id=${this.sku_id}&invite_code=${this.userInfo && this.userInfo.invite_code || ''}&type=share`,
				imageUrl: this.goodsInfo.thumb,
			};
		},
		methods: {
			goMerchant(item) {
			  this.$urouter.navigateTo({
			    url: '/pages/goods/shop/shop/index',
			    params: {
			      partner_id: item.u_id
			    }
			  });
			},
			// 获取用户信息
			getInfo() {
				this.$api.post(global.apiUrls.postGetUserInfo).then(res => {
					if (res.data.code == 1) {
						if(res.data.data.lastid == 0 && this.invite_code){
							this.$store.commit('logout');
							this.$store.dispatch('getCartList');
							setTimeout(()=>{
								this.$util.actionAuth(() => {})
							}, 800)
						}
						this.$store.commit('updateUserInfo', res.data.data);
					}
				}).catch(err => {})
			},
			navToQuestionsAnswers() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/goods/ask-answer/ask-answer-list/index',
						params: {
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			switchFreight() {
				this.openPopup('explain');
			},
			/**
			 * @event
			 * @description  点击图片放大
			 * @param {String} item 当前图片url
			 * @param {Array} urls 图片url
			 */
			preview(item, urls) {
				uni.previewImage({
					current: item,
					urls: urls
				});
			},
			// 返回
			back() {
				if (this.openModel == 'share') {
					uni.reLaunch({
						url: '/pages/tab/home/shopindex/index'
					})
				} else {
					uni.navigateBack();
				}
			},
			// 轮播图切换
			changeSwiper(e) {
				this.curSwiper = e.detail.current + 1;
			},
			// 获取地址
			loadAddress() {
				this.$api.post(global.apiUrls.getUserAddressAddressList).then((res) => {
					if (res.data.code == 1) {
						this.addrs = res.data.data;
					}
				});
			},
			// tab栏切换
			changeTab(item) {
				let nowScrollTop = this.scrollTop;
				uni
					.createSelectorQuery()
					.in(this)
					.select("#" + item.id)
					.boundingClientRect((pos) => {
						let posTop = pos.top;
						if (posTop == 0 && nowScrollTop != 0) return;
						this.$nextTick(() => {
							uni.pageScrollTo({
								duration: 200,
								scrollTop: posTop + nowScrollTop - 115 - this.StatusBar
							});
							setTimeout(() => {
								this.curTab = item.id;
							}, 200)
						})
					})
					.exec();
			},
			// 打开弹窗
			openPopup(type, param) {
				this.$refs[type].open(param);
			},
			// 获取商品详情
			loadData() {
				this.$api
					.get(global.apiUrls.getGoodsDetail, {
						goods_id: this.goods_id,
						is_cache: 1,
						activity_id: this.activity_id,
						user_id: (this.userInfo && this.userInfo.id) || 0,
					})
					.then((res) => {
						if (res.data.code == 1) {
							let data = res.data.data;
							this.swipers = data.images;
							this.goodsInfo = {
								name: data.name,
								price: data.shop_price,
								market_price: data.market_price,
								discounts: data.discounts || 0.0,
								thumb: data.thumb,
								description: data.description,
								is_collect: data.is_collect,
								share_award_money: data.share_award_money || 0.0,
								number: 1,
								stock: data.stock || 0,
								totalStock: data.stock || 0,
								sales_sum: data.sales_sum,
								is_spec: data.is_spec,
								goods_label: data.goods_label,
								goods_label_activity: data.goods_label_activity,
								goods_label_service: data.goods_label_service,
								praise_rate: data.praise_rate,
								freight_price: data.freight_price,
								member_price: data.member_price,
								shop_price: data.shop_price,
								activity_type: data.activity_info.activity_type,
								activity_price: data.activity_price,
								member_activity_price: data.member_activity_price,
								adslogan: data.adslogan
							};
							if (data.freight_explain) {
								this.freight_explain = data.freight_explain.replace(/\n/g, '<br/>');
							}
							this.shop_info = data.shop_info || {};
							this.shop_id = data.shop_info.id;
							this.limit = data.limit || 0;
							this.order_paid = data.order_paid || 0;
							this.body = richText.format(data.body);
							this.comment = data.comment || [];
							this.comment_total = data.comment_total || 0;
							this.question_total = data.question_total || 0;
							this.question_list = data.question_list || [];
							this.send_type = data.send_type;
							if (data.is_spec == 1) {
								this.spec_list = data.activity_spec_list;
								this.sku_list = Object.values(data.activity_sku_list)
									.map((item) => {
										item.sku_spec = item.key.split("_");
										return item;
									})
									.filter((item) => {
										return item.stock > 0;
									});
							}
							this.isPageShow = true;
							if (data.activity_info && data.activity_info.activity_type != 0) {

								this.initDownTime(data.activity_info.edate);
								// this.initDownTime(data.activity_info.surplus_time);
							}
							uni.stopPullDownRefresh();
							this.$nextTick(() => {
								this.computedPosTop();
								if (data.is_spec == 1) {
									setTimeout(() => {
										this.$refs.specs.init();
									}, 100)
								}
							});
						} else {
							this.$message.info(this.i18n["获取详情失败"]);
							setTimeout(() => {
								uni.navigateBack();
							}, 300);
						}
					});
			},
			//获取商品跑马灯
			loadHorsRaceLamp() {
				this.$api.post(global.apiUrls.postHorseRaceLamp, {
					goods_id: this.goods_id
				}).then(res => {console.log("跑马灯: ", res);
					if (res.data.code == 1) {
						this.horsRaceList = res.data.data
					}
				})
			},
			// 初始化倒计时
			initDownTime(time) {
				time = Number(time);
				if (time > 0) {
					let timeInfo = this.$util.downTime(time);
					this.downInfo = {
						title: this.i18n['距秒杀结束仅剩'],
						days: timeInfo.days,
						hours: timeInfo.hours,
						minutes: timeInfo.minutes,
						seconds: timeInfo.seconds,
					}
				}
			},
			// 计算锚点位置
			computedPosTop() {
				const query = uni.createSelectorQuery().in(this);
				this.tabs.forEach((item, index) => {
					query.select('#' + item.id).boundingClientRect(data => {
						this.$set(this.tabs[index], 'top', data.top);
					}).exec();
				})
			},
			// 收藏
			collect() {
				this.$util.actionAuth(() => {
					this.$api
						.post(global.apiUrls.postGoodsCollection, {
							collect_id: this.goods_id,
							sku_id: this.sku_id,
							collect_title: this.goodsInfo.name,
							type: 1,
						})
						.then((res) => {
							if (res.data.code == 1) {
								if (this.goodsInfo.is_collect) {
									this.goodsInfo.is_collect = 0;
								} else {
									this.goodsInfo.is_collect = 1;
								}
								this.$message.info(res.data.msg);
							}
						});
				});
			},
			// 修改购买数量
			setNumber(num) {
				this.goodsInfo.number = num;
			},
			// 修改购买规格
			setSpec(skuInfo) {
				const {
					key_name,
					shop_price,
					market_price,
					sku_id,
					stock,
					thumb,
					limit,
					order_paid
				} = skuInfo;
				this.sku_id = sku_id;
				this.sku_name = key_name;
				this.goodsInfo.price = shop_price;
				this.goodsInfo.stock = stock;
				thumb && (this.goodsInfo.thumb = thumb);
				this.goodsInfo.member_price = skuInfo.member_price;
				this.goodsInfo.shop_price = skuInfo.shop_price;
				this.goodsInfo.activity_price = skuInfo.activity_price;
				this.goodsInfo.member_activity_price = skuInfo.member_activity_price;
				if (order_paid) this.order_paid = order_paid;
				if (limit) this.limit = limit;
				this.setNumber(1);
				this.$refs.specs.setnumber(1);
			},
			// 立即购买
			buyNow() {
				this.$util.actionAuth(() => {
					if(this.userInfo.is_vip){
					if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
					let data = {
						type: "buy",
						goods_id: this.goods_id,
						number: this.goodsInfo.number,
						send_types: this.send_type
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					if (this.curAddr) {
						data.address_id = this.curAddr.address_id;
					}
					if (this.activity_id) {
						data.activity_id = this.activity_id;
					}
					if(this.order_paid == 0) return this.$message.info(this.i18n['已经超过限购数量'])
					if(this.goodsInfo.number > this.order_paid) return this.$message.info(this.i18n['已经超过限购数量'])
					this.$urouter.navigateTo({
						url: "/pages/order/order-process/confirm-order/index",
						params: data,
					});
					}else{
						this.$message.info('请先购买会员再购买')
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/member/vip/vip/index'
							})
						},800)
					}
				});
			},
			// 加入购物车
			addCart() {
				this.$util.actionAuth(() => {
					const data = {
						num: this.goodsInfo.number,
						goods_id: this.goods_id,
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					this.$api.post(global.apiUrls.postGoodsAddToCart, data).then((res) => {
						if (res.data.code == 1) {
							this.$message.info(this.i18n["加入购物车成功"]);
							uni.$emit("updateCart");
						} else {
							this.$message.info(res.data.msg);
						}
					});
				});
			},
			// 选择地址
			switchAddress() {
				this.$util.actionAuth(() => {
					this.openPopup("address");
				});
			},
			// 去评价列表
			navToComment() {
				if (this.comment_total == 0)
					return this.$message.info(this.i18n["该商品暂无评论"]);
				this.$urouter.navigateTo({
					url: "/pages/goods/goodsdetail/goods-comment/index",
					params: {
						goods_id: this.goods_id,
					},
				});
			},
			// 改变收货地址
			changeAddress(e) {
				this.curAddr = e;
				this.$refs.address.close();
			},
			// 去购物车
			navToCart() {
				this.$urouter.switchTab("/pages/tab/cart/cart-page/index");
			},
			// 客服
			navToServer() {
				this.$urouter.navigateTo({
					url: "/pages/service-message/service/service-detail/index",
					params: {
						kid: 1,
						goods_id: this.goods_id,
						activity_id: this.activity_id || 0
					},
				});
			},
			// 倒计时结束回调
			countOver() {
				this.loadData();
			},
			// 分享海报信息
			setPosterInfo(codePath) {
				this.$refs.share.init({
					goodsName: this.goodsInfo.name,
					goodsImage: this.swipers[0],
					price: this.goodsInfo.price,
					market_price: this.goodsInfo.market_price,
					avatar:this.userInfo && this.userInfo.head_img,
					name:this.userInfo && this.userInfo.user_name,
				});
			},
			// 获取二维码
			getShareCode() {
				// #ifdef MP-WEIXIN
				let data = {
					a: this.goods_id,
					b: this.activity_id || 0,
					c: this.sku_id || 0,
					d: this.userInfo && this.userInfo.invite_code || ''
				};
				let dataStr = this.$util.serialize(data);
				let page = 'pages/activity/seckill/seckill-detail/index';
				this.$api.post(global.apiUrls.postShareCode, {
					page: page,
					scene: dataStr,
					width: 180,
				}).then(res => {
					if (res.data.code == 1) {
						let data = res.data.data.base64;
						this.shareCode = data;
						// this.$util.base64ToPath(data).then(res => {
						// 	this.shareCode = res;
							this.$refs.share.init();
						// }).catch(err => {
						// 	this.$message.info(this.i18n['保存临时二维码失败']);
						// })
					} else {
						this.$message.info(this.i18n['获取分享二维码失败']);
					}
				}).catch(err => {})
				// #endif
				// #ifndef MP-WEIXIN
				this.$api.post(global.apiUrls.postAppShareCode, {
					goods_id: this.goods_id,
					activity_id: this.activity_id || 0,
					sku_id: this.sku_id || 0,
				}).then(res => {
					let data = res.data;
					if (data.code == 1) {
						let url = data.data.qrcode_url;
						this.shareCode = url;
						this.$refs.share.init();
					} else {
						this.$message.info(this.i18n['获取分享二维码失败']);
					}
				}).catch(err => {
					console.log(err);
				})
				// #endif
			},
		},
		onPullDownRefresh() {
			this.loadData();
		},
	};
</script>

<style lang="scss" scoped>
	button {
	  background: transparent;
	  padding: 0;
	  margin: 0;
	  &:after {
	    border: none;
	  }
	  .margin-top-xs{
		  margin-top: 0;
		  height: 44rpx;
	  }
	}
	.page {
		min-height: 100%;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.video-poster {
			height: 100%;
			position: relative;
			font-size: 40rpx;
			color: #ffffff;

			#myVideo {
				width: 750rpx;
				height: 100%;
			}

			.video-poster-circle {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1rpx solid #ffffff;
				z-index: 99;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;

				.video-poster-mask {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.5);
					z-index: -1;
				}
			}
		}

		.pagination-left {
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			left: 32rpx;
			bottom: 32rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.pagination {
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			color: rgba(255, 255, 255, 0.8);
		}

		.prices {
			background-image: url($IMG_BASE_URL + 'activity/skill-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.sale-box {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					width: 2rpx;
					height: 44rpx;
					display: inline-block;
					background: #ffffff;
					opacity: 0.6;
					left: -62rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.discounts-info {
			background-image: url($IMG_BASE_URL + 'goods/detail_coupon_bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.tools {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 999;

			.toolbar {
				.tag {
					position: absolute;
					top: -10rpx;
					right: -18rpx;
					background: $bgtheme;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					font-size: 20rpx;
					color: #ffffff;
					line-height: 36rpx;
					text-align: center;
				}
			}
		}
	}

	.tabs {
		width: 100%;
		pointer-events: all;

		.tab-item {
			border-bottom: 4rpx solid white;

			&.active {
				border-bottom-color: $theme;
			}
		}
	}
	.goods-tag {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		height: 20px;
		line-height: 20px!important;
		display: inline-block;
	}
	.evaluates {
	  .title {
	    height: 100rpx;
	
	    .title-color::before {
	      left: -4rpx;
	      top: 10rpx;
	    }
	  }
	}
	
	.merchant-info {
	  padding: 26rpx 0;
	
	  .left {
	    .merchant-img {
	      width: 100rpx;
	      height: 100rpx;
	    }
	
	    .merchant-text {
	      margin-left: 24rpx;
	      width: 420rpx;
	      display: flex;
	      flex-direction: column;
	      justify-content: space-between;
	
	      .m-title {
	        font-size: 32rpx;
	        color: #333333;
	        font-weight: bold;
	      }
	    }
	  }
	
	  .right {
	    display: flex;
	    align-items: center;
	
	    text {
	      // background: $bgtheme;
	      width: 130rpx;
	      text-align: center;
	      height: 56rpx;
	      line-height: 56rpx;
	      border-radius: 28rpx;
	      color: #666;
	    }
	  }
	}
</style>
